<template>
  <div class="participant wrap-table">
      <el-form ref="form" :model="searchData" label-width="80px" class="clearfix" label-position="left">
          <el-form-item label="入组时干预强度" label-width="110px" class="pull-left item-right" style="width:200px">
              <el-select v-model="searchData.inIntensityOfIntervention" clearable placeholder="请选择">
                  <el-option
                          v-for="item in options4"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                  </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="当前干预强度" label-width="110px" class="pull-left item-right" style="width:200px">
              <el-select v-model="searchData.intensityOfIntervention" clearable placeholder="请选择">
                  <el-option
                          v-for="item in options4"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                  </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="试验类型" class="pull-left item-right" style="width:240px">
              <el-select v-model="searchData.testType" clearable placeholder="请选择">
                  <el-option
                          v-for="item in options6"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                  </el-option>
              </el-select>
          </el-form-item>

          <el-form-item class="pull-left item-right" style="width:310px;margin-left: -60px" label="">
              <el-input v-model="searchData.keyWord" placeholder="手机号、研究编号、姓名首字母"></el-input>
          </el-form-item>

          <el-button type="primary" @click="checkList" class="pull-right mg-lr-20 pd-bt">查询</el-button>
      </el-form>

      <template>
        <el-table
          :data= "tableData"
          	id="out-table"
            border
            :height="maxHeight"
            v-loading="loading"
            element-loading-text="加载中"
            style="width: 100%"
        >
        <el-table-column
				    prop="Surname"
				    label="姓名首字母"
				    align="center"
				    min-width="100">
				</el-table-column>
        	<el-table-column
				    label="手机号"
				    align="center"
				    min-width="100">
				    <template slot-scope="scope">
				        <el-tooltip :content="scope.row.Mobile" placement="top">
				            <span class="click_line" @click="JumpUserinfo(scope.row)">{{scope.row.Mobile |mobileFilter}}</span>
				        </el-tooltip>
				    </template>
				</el-table-column>
        	<el-table-column
				    prop="ResearchNo"
				    label="研究编号"
				    align="center"
				    min-width="100">
				</el-table-column>
        	<el-table-column
				    prop="CreateTime"
				    label="登记日期"
            :formatter="DateFilter"
				    align="center"
				    min-width="100">
				</el-table-column>
        	<el-table-column
				    prop="Period"
				    label="研究阶段"
				    :formatter="PeriodFilter"
				    align="center"
				    min-width="100">
				</el-table-column>
        <el-table-column
				    prop="DistrictName"
				    label="所在地区"
				    align="center"
				    min-width="100">
				</el-table-column>
        <el-table-column
				    prop="CName"
				    label="所在社区"
				    align="center"
				    min-width="100">
				</el-table-column>
        <el-table-column
				    prop="InIntensityOfIntervention"
				    label="入组时干预强度"
				    :formatter="IntensityFilter"
				    align="center"
				    min-width="100">
				</el-table-column>
        <el-table-column
				    prop="IntensityOfIntervention"
				    label="当前干预强度"
				    :formatter="IntensityFilter"
				    align="center"
				    min-width="100">
				</el-table-column>
        <el-table-column
				    prop="Reason"
				    label="健康现况风险因素"
				    :show-overflow-tooltip="true"
				    align="center"
				    min-width="200">
				</el-table-column>
        <el-table-column
				    prop="TransforIntensityTime"
				    label="低到高转变日期"
            :formatter="DateFilter"
				    align="center"
				    min-width="100">
				</el-table-column>
        <el-table-column
				    prop="TransforIntensityReason"
				    :show-overflow-tooltip="true"
				    label="低到高健康现况风险因素"
				    align="center"
				    min-width="200">
				</el-table-column>
	        <el-table-column
			        prop="ChildReason"
			        :show-overflow-tooltip="true"
			        label="儿童期低到高健康现况风险因素"
			        align="center"
			        min-width="200">
	        </el-table-column>
	      </el-table>
      </template>

      		<!--分页-->
      <div class="block mg-20-auto pagination-fixed">
		    <el-pagination
		            @size-change="handleSizeChange"
		            @current-change="handleCurrentChange"
		            :current-page.sync="pageId"
					      :page-sizes="[10, 20, 30, 40,80,100,200,500]"
		            :page-size="pageSize"
		            layout="total, sizes, prev, pager, next, jumper"
		            :total="total">
		    </el-pagination>
		</div>
  </div>
</template>

<script>
  export default {
    name: '',
    data() {
      return {
        searchData: {
          inIntensityOfIntervention:'', //入组时干预强度
          intensityOfIntervention: '', //当前干预强度
          testType: '2', // 试验类型
          keyWord: ''// 手机号码
        },
        tableData: [],//table数据
        pageId:1,
        pageSize:10,
        loading:false,
        maxHeight: '',
        total:null,
        options4: [{value: '', label: '全部'},{value: '1', label: 'AA'}, {value: '2', label: 'A'}],
        options6: [{value: '0', label: '预试验'},{value: '1', label: '正式试验'},{value: '2', label: '预试验+正式试验'}],
        PeriodFilter(row, column, cellValue, index){
        	return cellValue==1?'孕前期':cellValue==2?'怀孕期':'儿童期'
        },
        GroupTypeFilter(row, column, cellValue, index){
            return cellValue=='1'?'A':'B'
        },
        IntensityFilter(row, column, cellValue, index){
            if(cellValue=='1'){
                return 'AA'
            }
            else if(cellValue=='2'){
                return 'A'
            }
            else{
                return '-'
            }
        },
        	DateFilter(row, column, cellValue, index){
            if(cellValue) {
                return cellValue.substring(0,10)
            }

        	}
      }
    },
    beforeMount:function() {
        let that=this;
        let appHeight=$(window).height();
        let autoheight=(appHeight-288)+'px'
        that.maxHeight=autoheight

    },
    mounted(){
      this.getList()
    },
    filters:{
        mobileFilter(cellValue) {
            return cellValue.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
        },

    },
    methods: {

      handleCurrentChange(val) {    //页数改变
    	    this.pageId = val
    	    this.getList()
    	},
    	handleSizeChange(val) {       //条数改变
    	    this.pageSize=val;
    	    this.getList()
    	},

      getList:function(){           //获取一级信息列表
    	    let that=this
    	    that.loading=true
    	    that.service({
    	        url:'/Statistic/GetUserHealthCondition',
    	        method:'get',
    	        params:{
    	        	pageCount:(that.pageId-1),
    	        	pageSize:that.pageSize,
    	        	    ...that.searchData,
    	        }
    	        }).then(response=>{
		            console.log(response)
    	            that.tableData=response.dtData;
    	            that.total =parseInt(response.dtData[0].TotalCount);
    	            that.loading=false
    	        }).catch(data=>{
    	        that.loading=false
    	    })
    	},
      checkList(){
            this.pageId=1;
			this.pageSize=10;
			this.total=null;
			this.getList()
      }
    }
  }
</script>

<style lang="scss" scoped>
   .content{
       margin:0px;
       .p1{
           color:#ccc;
           text-align: center;
           font-size: 15px;
           margin-top: 10px;
       }

       .p2{
           text-align: center;
           margin-top: 5px;
           i{
               cursor: pointer;
               padding:0 10px;
           }
       }
        ul{
            li{
                margin:10px;
                font-size:16px;
                line-height:1.5;
                i{
                    color: #409EFF;
                    padding-right: 10px;
                }
            }
        }
   }
   .sop{
       margin:15px;
   }
   .foot-pos{
       position: absolute;
       bottom: 20px;
       left: 15px;

   }
   .item-right{
       margin-right: 15px;
   }
   .fade-enter-active, .fade-leave-active {
       transition: opacity .4s;
   }
   .fade-enter, .fade-leave-to{
       opacity: 0;
   }
   .bmi-span{
       color: #666;
       font-size: 16px;
       padding-left: 5px;
       font-weight:bolder;
       font-style: normal;
   }
   .isRed{color: red !important;}
   .pagination-fixed{
    position: static;
   }
</style>
